<template>
  <div v-if="articleListData.list">
    <template v-if="articleListData.list.length > 0">
      <ul class="con list list-2">
        <li v-for="item in articleListData.list" :key="item.article.articleId">
          <router-link :to="'/planarticle/' + item.article.articleId" >
            <div class="photo-img">
              <a href="javascript:void(0)" class="photo photo-big">
                <img :src="item.article.imgUrl">
              </a>
            </div>
            <div class="info fr">
              <a href="javascript:void(0)" class="title ftz18">{{item.article.title}}</a>
              <a href="javascript:void(0)" class="txt">
                  {{item.article.summary}}
              </a>
              <div class="tips-box">
                <span class="photo"><img :src="item.article.avatar"></span>
                <span class="color-red">{{item.article.author}}</span>
                <span class="line"></span>
                <span class="color-red">{{item.article.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                <span class="line"></span><span class="color-red">分类：{{item.author.field}}</span><span class="line"></span>
                <span class="color-red">所属：{{item.planName}}</span>
                <span class="fr m4">
                  <a class="mr16" href="javascript:void(0)"><i class="icon icon-share"></i>分享</a>
                  <a class="mr16" href="javascript:void(0)" @click.stop.prevent="collect(item)">
                    <template v-if="!item.favorited" >
                      <i class="icon icon-collet"></i>
                      <span>收藏</span>
                    </template>
                    <template v-else>
                      <i class="icon icon-collet on"></i>
                      <span>取消收藏</span>
                    </template>
                  </a>
                  <a href="javascript:void(0)" @click.stop.prevent="star(item)">
                    <i class="icon icon-praise" :class="{on: item.praised}"></i>
                    {{item.article.praise > 0 ? item.article.praise: ''}}
                  </a>
                </span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <button v-if="articleListData.total > articleListData.list.length"
        class="load-more-btns small-one ftz16" @click="loadMore()">
        <template v-if="articleListData.isLoadingMore">
          <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
          <span>正在加载，请稍候......</span>
        </template>
        <span v-else>点击加载更多...</span>
      </button>
    </template>
    <NoDataTips v-else/>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  myFavoritePlanArticle,
  favoritePlanArticle,
  unFavoritePlanArticle
} from '@/service/api'
export default {
  data () {
    return {
      articleListData: {
        list: [],
        total: 0,
        isLoadingMore: false
      },
      // 全部大咖时使用的查询条件
      searchData: {
        pageSize: 5,
        pageNum: 1
      }
    }
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.showLoadingModal()
      this.initDataList()
    })
  },
  methods: {
    showLoadingModal () {
      if (window.layer) {
        this.layerLoad = window.layer.load(0, {
          shade: false
        })
      }
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    /**
     * 初始化页面数据
     */
    initDataList () {
      Promise.all([
        this.getArticleList()
      ]).then((res) => {
        this.closeLoadingModal()
        // 列表
        let articleData = res[0]
        this.articleListData.list = []
        if (articleData.status === 200) {
          this.articleListData.loaded = true
          this.articleListData.total = articleData.data.data.total
          this.articleListData.list = articleData.data.data.list
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    // 列表
    async getArticleList () {
      let list = await myFavoritePlanArticle(this.searchData)
      return list
    },
    loadMore () {
      this.searchData.isLoadingMore = true
      this.searchData.pageNum++
      this.getArticleList().then((res) => {
        this.articleListData.isLoadingMore = false
        if (res.status === 200) {
          this.articleListData.list.push(...res.data.data.list)
        } else {
          this.searchData.pageNum--
          this.errorMsg()
        }
      })
    },
    // 点赞
    async star (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再点赞！')
        return
      }
      if (item.praised) {
        return
      }
      let res = await api.praisePlanArticle({articleId: item.article.articleId})
      if (res.data && res.data.code === 200) {
        item.praised = true
        item.article.praise++
      }
    },
    // 收藏
    collect (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再收藏！')
        return
      }
      if (!item.favorited) {
        this.execCollect(true, item) // 收藏
      } else {
        let title = '确认取消收藏该文章吗?'
        this.showConfirmBox(title, () => {
          this.execCollect(false, item) // 取消收藏
        })
      }
    },
    showConfirmBox (title, callback) {
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">' + title + '</div>',
        btn: '确认',
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          callback()
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    async execCollect (target, item) {
      let res = null
      if (!target) {
        res = await unFavoritePlanArticle({articleId: item.article.articleId})
      } else {
        res = await favoritePlanArticle({articleId: item.article.articleId})
      }
      if (res.data && res.data.code === 200) {
        item.favorited = target
      }
    }
  }
}
</script>

<style scoped lang="scss">
.con li{
  padding: 20px 3%;
  border-bottom: 1px solid #e6e6e6;
  height: 165px;
  box-sizing: border-box;
  overflow: hidden;
}
.con li>a{
  display: flex;
  overflow: hidden;
}
.list-2 .info{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
  padding: 0 10px;
}
.list-2 .title{
  max-width: 100%;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 9px;
  display: block;
}
.list-2 .info .tips-box{
  width: 100%;
  color: #808080;
}
.list-2 .info .tips-box .photo{
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px;
}
.list-2 .info .tips-box .line{
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 12px;
  background: #808080;
  margin: -2px 10px 0 10px;
}
.list-2 .txt{
  line-height: 24px;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
}
.list-2 .m4{
  margin: 4px 0;
}
.con .photo-img{
  vertical-align: top;
  position: relative;
  width: 180px;
  height: 120px;
  margin-right: 10px;
}
.con .photo{
  display: block;
  overflow: hidden;
}
.con .photo img{
  width: 100%;
  height: 100%;
}

.list .tips-box .icon{
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  background-image: url('../../../assets/res/img/icon_re.png');
  background-repeat: no-repeat;
  margin-right: 6px;
  &.icon-share{
    background-position: -66px -33px;
  }
  &.icon-collet{
    background-position: -127px -33px;
    &.on {
      background-position: -127px 0;
    }
  }
  &.icon-praise{
    background-position: -191px -33px;
    &.on {
      background-position: -191px 0;
    }
  }
}
</style>
